<template>
  <div style="width:100%;height:100%;" id="capacityModel"></div>
</template>

<script>
  const echarts = require('echarts');
  export default {
    name: 'capacityModel',
    props: {
      capacityModel: Array,
    },
    data() {
      return {};
    },
    methods: {
      init() {
        // console.log("88888888")
        let capacity = this.capacityModel;
        let capacityModelMap = echarts.init(document.getElementById('capacityModel'));
        let xAxisTxt = [];
        let capacityList = [];
        capacity.forEach((item,index) =>{
          let list = {
            text: item.skillName,
            max: 10,
            axisLabel: index === 0 ?{
              show: true,
              fontSize: 12,
              color: '#000',
              showMaxLabel: true, //不显示最大值，即外圈不显示数字30
              showMinLabel: true, //显示最小数字，即中心点显示0
            } : {},
          };
          let score = item.score ? item.score : 0;
          xAxisTxt.push(list);
          capacityList.push(score);
        });
        let option = {
          title: {
            text: '能力模型'
          },
          radar: [
            {
              indicator: xAxisTxt,
              center: ['25%', '50%'],
              radius: 120,
              axisLine: {
                lineStyle: {
                  color: '#666666',
                },
              },
              splitArea : {
                show : false,
                areaStyle : {
                  color: '#ffffff', // 图表背景的颜色
                },
              },
              splitLine : {
                show : true,
                lineStyle : {
                  width : 1,
                  color : '#cdcdcd', // 设置网格的颜色
                },
              },
            }
          ],
          series: [
            {
              type: 'radar',
              data: [
                {
                  value: capacityList,
                  itemStyle: {
                    normal: {
                      color: '#ed7572',
                      lineStyle: {
                        color: '#f89795',
                      },
                    },
                  },
                  // label: {
                  //   normal: {
                  //     show: true,
                  //     formatter: function (params) {
                  //       return params.value;
                  //     }
                  //   }
                  // },
                  areaStyle: {
                    normal: {
                      opacity: 0.4,
                      color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                        {
                          color: '#f9b7b6',
                          offset: 0
                        },
                        {
                          color: '#f9b7b6',
                          offset: 1
                        }
                      ])
                    }
                  }
                },
              ]
            }
          ]
        };
        capacityModelMap.setOption(option);
      }
    },
    watch: {
      capacityModel: {
        handler() {
          this.init()
        },
        deep: true
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.init()
      });
    }
  };
</script>

<style scoped>

</style>
